<template>
  <div ref="main" style="width: 100%; height: 50px"></div>
</template>

<script>
// 引入可视化图表插件
import echarts from "echarts";
export default {
  name: "LineCharts",
  props: ["smooth", "dataList"],
  watch: {
    dataList() {
      this.myChart.setOption({
        series: [
          {
            // 形状
            type: "line",
            data: this.dataList,
            // 拐点的设置
            symbol: "none",
            smooth: this.smooth, // 设置折线图平滑
            // 线条样式
            lineStyle: {
              normal: {
                color: "red",
              },
            },
            // 渐变样式
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  // 渐变颜色
                  {
                    offset: 0,
                    color: "red",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ],
                global: false,
              },
            },
          },
        ],
      });
    },
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.main);
    this.myChart.setOption({
      xAxis: {
        // 控制x轴的显示与隐藏
        show: false,
        type: "category",
        // 去掉x轴左右两侧的留白
        boundaryGap: false,
      },
      yAxis: {
        // 控制y轴的显示与隐藏
        show: false,
      },
      series: [
        {
          // 形状
          type: "line",
          data: this.dataList,
          // 拐点的设置
          symbol: "none",
          smooth: this.smooth, // 设置折线图平滑
          // 线条样式
          lineStyle: {
            normal: {
              color: "red",
            },
          },
          // 渐变样式
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                // 渐变颜色
                {
                  offset: 0,
                  color: "red",
                },
                {
                  offset: 1,
                  color: "#fff",
                },
              ],
              global: false,
            },
          },
        },
      ],
      //布局调试(图形距离容器的距离)
      grid: {
        left: 0,
        top: 5,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style>
.lineCharts {
  height: 50px !important;
}
</style>